<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="q.equipmentId" class="filter-item" placeholder="请选择数据源" clearable>
        <el-option label="全部" value="">
        </el-option>
        <el-option v-for="item in Equips" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="q.conditionName" class="filter-item" placeholder="请选择分类" clearable>
        <el-option v-for="item in alarmCategoryOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div class="filter-item">
        <el-input v-model="q.source" placeholder="位号"/>
      </div>
      <div class="filter-item">
        <el-input v-model="q.itemCode" placeholder="指标编码"/>
      </div>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <div class="filter-item pull-right">
        <span class="label-text">自动刷新</span>
        <el-switch v-model="autoRefresh"></el-switch>
      </div>
    </div>
    <el-table :key="tableKey" v-loading="tableLoading" :data="dataAlarms" border fit highlight-current-row
              style="width: 100%;">
      <el-table-column label="位号" prop="source" min-width="90"></el-table-column>
      <el-table-column label="指标编码" prop="itemCode" min-width="90"></el-table-column>
      <el-table-column label="事件类型" prop="category" align="center" min-width="90px"></el-table-column>
      <el-table-column label="级别" prop="severity" align="center" min-width="90px"></el-table-column>
      <el-table-column label="状态" align="center" min-width="90px">
        <template slot-scope="{row}">
          {{ transState(row.conditionState) }}
        </template>
      </el-table-column>
      <el-table-column label="报警类型" prop="conditionName" align="center" min-width="90"></el-table-column>
      <el-table-column label="数据源名称" prop="equipmentName" align="center" min-width="90"></el-table-column>
      <el-table-column label="当前值" prop="currentValue" align="center" min-width="90"></el-table-column>
      <el-table-column label="阈值" prop="threshold" align="center" min-width="90"></el-table-column>
      <el-table-column label="告警信息" prop="message" align="center" min-width="90"></el-table-column>
      <el-table-column label="触发时间" align="center" min-width="90">
        <template slot-scope="scope">
          <span>{{ transDate(scope.row.activeTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="showMore(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalCount > 0" :total="totalCount" :page-index.sync="q.page" :page-size.sync="q.size"
                @pagination="getLivePageAlarm"/>
    <alarm-detail-drawer ref="alarmDetailDrawer"></alarm-detail-drawer>
  </div>
</template>

<script>
  import { getAlarmEquip, getLivePageAlarm } from "@/api/alarm";
  import { alarmCategoryOptions } from "@/utils/enums.js";
  import Pagination from "@/components/Pagination";
  import AlarmDetailDrawer from "./components/AlarmDetailDrawer";
  import moment from "moment";

  export default {
    components: {
      pagination: Pagination,
      AlarmDetailDrawer
    },
    data() {
      return {
        alarmCategoryOptions,
        isSubmitLoading: false,
        tableLoading: false,
        tableKey: 0,
        Equips: undefined,
        dataAlarms: [],
        q: {
          conditionName: undefined,
          equipmentId: undefined,
          source: undefined,
          itemCode: undefined,
          page: 1,
          size: 10
        },
        autoRefresh: true,
        totalCount: 0,
        timer: undefined
      };
    },
    computed: {},
    watch: {
      autoRefresh: function(newVal) {
        if (newVal) {
          this.setInterval();
        } else {
          clearInterval(this.timer);
        }
      }
    },
    destroyed() {
      clearInterval(this.timer);
    },
    created() {
      this.getAlarmEquip();
      this.getLivePageAlarm();
      this.setInterval();
    },
    methods: {
      setInterval() {
        this.timer = setInterval(() => {
          this.getLivePageAlarm();
        }, 5000);
      },
      handleSearch() {
        this.getLivePageAlarm();
      },
      getAlarmEquip() {
        getAlarmEquip().then(result => {
          this.Equips = result;
        });
      },
      getLivePageAlarm() {
        this.tableLoading = true;
        // 查询告警信息
        getLivePageAlarm(this.q).then(result => {
          this.dataAlarms = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      transDate(timestamp) {
        return moment(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss");
      },
      transState(conditionState) {
        let returnVal = "";
        switch (conditionState) {
          case 0:
            returnVal = "报警";
            break;
          case 1:
            returnVal = "消警";
            break;
        }
        return returnVal;
      },
      showMore(item) {
        this.$refs["alarmDetailDrawer"].show(item);
      }
    }
  };
</script>

<style lang="scss">
  .full-container {
    min-height: calc(100vh - 50px);
  }
</style>
